<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button-component title="title1 :" @clicknow="clicknow"> <p>dsds</p> </button-component>
			<button-component title="title2 :"></button-component>
		</div>
		<script>
			/**
			 * <slot></slot> 放在模板里面 组件中间可以添加其他元素例如：<button-component title="title1 :"> <p>dsds</p> </button-component>
			 * 
			 * 组件调外部Vue的函数
			 */
			Vue.component('button-component',{
				//组件自定义函数，在组建内部操作
				//template:'<div><h1>....</h1><button v-on:click="count++">{{title}}you click me{{count}} times </button><slot></slot></div>',
				template:'<div><h1>....</h1><button v-on:click="clickfun">{{title}}you click me{{count}} times </button><slot></slot></div>',
				data:function(){
					return {
						count:0
					}
				},
				props:['title'], //意思应该是template 可以取到组件上的属性
				methods:{
					clickfun:function(){
						this.count++;
						this.$emit('clicknow',this.count);
					}
				}
			})
			let vv=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					clicknow:function(e){
						console.log(e);
					}
				}
				
				})
		</script>		
	</body>
</html>
